import React, { Component } from "react";
import { Breadcrumb, Avatar, Descriptions, Table } from 'antd';
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
import axios from 'axios'
import '../Gzt/Gzt.css'

const columns = [
    {
        title: '楼盘名称',
        dataIndex: 'lpmx',
    },
    {
        title: '物业类型',
        dataIndex: 'wylx',
    },
    {
        title: '所属区域',
        dataIndex: 'ssqy',
    },
    {
        title: '发布时间',
        dataIndex: 'fbsj',
    },
];
const miaosuArr=[
    {name:'部门',
    miaosu:'产品部',
    id:1
    },
    {name:'上次登录',
    miaosu:'192.186.1.1',
    id:2
    },
    {name:'角色',
    miaosu:'产品主编',
    id:3
    },
    {name:'登录次数',
    miaosu:'66',
    id:4
    }
]
const renshuArr = [
    {
        loupan: '2222',
        loupanxz: '22',
        name:'楼盘',
        id:1
    },
    {
        loupan: '3333',
        loupanxz: '33',
        name:'在线房源',
        id:2
    },
    {
        loupan: '4444',
        loupanxz: '44',
        name:'活动报名',
        id:3
    },
    {
        loupan: '5555',
        loupanxz: '55',
        name:'团购优惠',
        id:4
    },
    {
        loupan: '6666',
        loupanxz: '66',
        name:'房源认购',
        id:5
    },
    {
        loupan: '7777',
        loupanxz: '77',
        name:'找房委托',
        id:6
    },
    {
        loupan: '8888',
        loupanxz: '88',
        name:'评测需求',
        id:7
    },
    {
        loupan: '9999',
        loupanxz: '99',
        name:'直通车',
        id:8
    },
    {
        loupan: '1233466',
        loupanxz: '143',
        name:'注册会员',
        id:9
    }
]
class Gzt extends Component {

    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
    }

    componentDidMount() {
        axios.post('https://www.easy-mock.com/mock/5eb2bf6c61983c2cb0cea73f/gzt/gzt')
            .then((res) => {
                console.log('工作台获取数据成功:' + JSON.stringify(res))
                this.setState({
                    data: res.data
                })
            })
            .catch((error) => { console.log('工作台获取数据失败:' + error) })
    }
    render() {
        return (
            <div>
                <Breadcrumb>
                    <Breadcrumb.Item href="">
                        <HomeOutlined />
                    </Breadcrumb.Item>
                    <Breadcrumb.Item href="">
                        <UserOutlined />
                        <span>工作台</span>
                    </Breadcrumb.Item>

                </Breadcrumb>
                <div className="banner_xt">
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size={86} icon={<UserOutlined />} />
                    <Descriptions className="right_ms" title="张学友" column={{ xl: 4 }}>
                         {miaosuArr.map((Item,id) => {
                            return (
                                    <Descriptions.Item label={Item.name} key={id}>{Item.miaosu}</Descriptions.Item>
                            )
                        })
                    }
                    </Descriptions>
                </div>
                <div className="box_zhtj">
                    <div className="left_st"></div><span className="right_zt">综合统计</span>
                </div>
                <div className="zhtj_dx">
                        {renshuArr.map((Item,id) => {
                            return (
                                <Descriptions column={{ xl: 3 }} key={id} className='bujua'>
                                    <Descriptions.Item label={Item.name}>总{Item.loupan}个,今日新增{Item.loupanxz}个</Descriptions.Item>
                                </Descriptions>
                            )
                        })
                    }
                </div>
                <div className="biaoge">
                    <div className="nrss_left">
                        <div className="box_zhtj">
                            <div className="left_st"></div>
                            <span className="right_zt">内容送审</span><br />
                            <span>您需要立即送审的内容</span><br />
                        </div>
                        <div>
                            <div className="xiahuaxian">送审楼盘</div>
                            <Table columns={columns} dataSource={this.state.data.data} size="middle" />
                        </div>
                    </div>
                    <div className="lppm_right">
                        <div className="box_zhtj">
                            <div className="left_st"></div>
                            <span className="right_zt">楼盘排名</span><br />
                            <span>结合WEB端，APP端综合统计得出的楼盘浏览量排行榜</span><br />

                        </div>
                        <div>
                            <div className="xiahuaxian">今日排名</div>
                            <Table columns={columns} dataSource={this.state.data.data} size="middle" />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default Gzt;